<template>
    <view>
        <!-- template对应的原始代码，为保证正常显示，已对其进行隐藏。 -->
        <block name="myJoinDetailTpl" v-if="false">
            <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
            <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

            <block v-if="isLoad">
                <view class="main padding-project">
                    <view class="text-pic-list-box margin-top-xs">
                        <view class="item card-project shadow-project">
                            <view class="title-line" @tap="url" :data-url="'../../meet/detail/meet_detail?id=' + join.JOIN_MEET_ID">
                                <view class="title content-cut-two">{{ join.JOIN_MEET_TITLE }}</view>
                                <view class="arrow"><text class="icon-right"></text></view>
                            </view>

                            <view class="author">
                                <text class="icon-remind margin-right-xs text-s"></text>
                                <text class="text-cut">{{ join.JOIN_MEET_DAY }} {{ join.JOIN_MEET_TIME_START }}～{{ join.JOIN_MEET_TIME_END }}</text>
                            </view>
                            <view class="data">
                                <text v-if="join.JOIN_STATUS == 1" class="text-green">
                                    <text class="icon-newshot margin-right-xxs"></text>
                                    预约成功{{ join.JOIN_IS_CHECKIN == 1 ? '，已签到' : '' }}
                                </text>

                                <button
                                    v-if="(join.JOIN_STATUS == 1 || join.JOIN_STATUS == 0) && join.JOIN_IS_CHECKIN == 0"
                                    @tap="bindCancelTap"
                                    class="btn mid bg-grey light margin-left-s"
                                >
                                    <text class="icon-close"></text>
                                    取消预约
                                </button>

                                <text v-if="join.JOIN_STATUS == 10" class="text-grey">
                                    <text class="icon-bad margin-right-xxs"></text>
                                    已取消
                                </text>

                                <block v-if="join.JOIN_STATUS == 99">
                                    <text class="text-orange">
                                        <text class="icon-bad margin-right-xxs"></text>
                                        系统取消
                                        <text class="text-grey" v-if="join.JOIN_REASON">：{{ join.JOIN_REASON }}</text>
                                    </text>
                                </block>
                            </view>

                            <view class="oprt" v-if="join.JOIN_STATUS == 0 || join.JOIN_STATUS == 1">
                                <view @tap="url" data-url="../../my/index/my_index" data-type="relaunch" v-if="isShowHome" class="btn margin-right-s">返回首页</view>
                                <view @tap="bindCalendarTap" class="btn">加入手机日程</view>
                            </view>
                        </view>
                    </view>

                    <view class="info-list-box" v-if="join.JOIN_STATUS == 1">
                        <view class="item card-project shadow-project">
                            <view class="info">
                                <view class="center">
                                    <text class="text-bold margin-right-s">预约码</text>
                                    (向工作人员出示进行核销)
                                </view>
                            </view>
                            <view class="info">
                                <view class="center">
                                    <image :show-menu-by-longpress="true" :src="qrImageData" class="loading" />
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="info-list-box margin-bottom-xxl">
                        <view class="item card-project shadow-project">
                            <view class="info margin-bottom-s">
                                <view class="center text-bold">预约信息</view>
                            </view>
                            <view class="info" v-for="(item, index) in join.JOIN_FORMS" :key="index">
                                <view class="title">{{ item.title }}：</view>

                                <view class="content">{{ item.val }}</view>
                            </view>

                            <view class="info text-grey margin-top-xs text-s">提交时间：{{ join.JOIN_ADD_TIME }}</view>
                        </view>
                    </view>
                </view>
            </block>
        </block>
    </view>
</template>

<style>
@import './my_join_detail_tpl.css';
</style>
